import React from "react";
import {filteredTodoListState, useRecoilValue} from "../../recoil/index";
import TodoItem from "./todoItem";

export default function ShowTodoList() {
    const todoLists = useRecoilValue(filteredTodoListState);
    return (<div className="form-group">
        <h3>Show TodoList</h3>
        <ul className="list-group">
            {
                todoLists.map(item => {
                    return <TodoItem key={item.id} item={item}/>
                })
            }
        </ul>
    </div>)
}
